<template>
  <div>
    <!-- 推广员工提成报表 -->
    <div class="statement-promoters-bonus app-main-content-box">
      <app-main-title title="推广员工提成报表" />
      <!-- 变动说明 -->
      <div class="app-main-tips-box top-tips">
        <div class="title">
          <i class="el-icon-warning" /> 报表说明
        </div>
        <ul>
          <li>
            1.报表数据根据推广成功时的员工提成方案进行统计，
            <a href class="btn" @click.prevent="goVipPromoters">
              <u>点击查看员工提成配置</u>
            </a> 。
          </li>
          <li>2.数据导出最长时间跨度为100天。</li>
        </ul>
      </div>
      <!--filter区域-->
      <div class="filter">
        <el-form ref="filterForm" :model="filterForm" label-width="100px" size="small">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="选择时间："
                prop="date"
                :rules="[
                  { required: true, message: '时间区间不能为空'}
                ]"
              >
                <el-date-picker
                  style="width: 360px"
                  v-model="filterForm.date"
                  type="daterange"
                  range-separator="~"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  :default-time="['00:00:00', '23:59:59']"
                >></el-date-picker>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                  label-width="140px"
                  label="消费类型："
                  prop="bonusType"
                >
                  <el-select style="width: 360px" v-model="filterForm.bonusType" placeholder="请选择">
                    <el-option
                      v-for="item in bonusTypeList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="员工名称/编号："
                prop="empData"
              >
                <el-input
                  style="width: 360px"
                  v-model="filterForm.empData"
                  placeholder="请输入名称/编号"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="提成发放类型："
                prop="grantWay"
              >
                <el-select style="width: 360px" v-model="filterForm.grantWay" placeholder="请选择">
                  <el-option
                    v-for="item in grantWayList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item
                label-width="140px"
                label="提成发放状态："
                prop="grantStatus"
              >
                <el-select style="width: 360px" v-model="filterForm.grantStatus" placeholder="请选择">
                  <el-option
                    v-for="item in grantStatusList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item class="filter-btn">
                <el-button type="primary" round @click="submitForm('filterForm')">查 询</el-button>
                <el-button round @click="resetForm('filterForm')">重 置</el-button>
                <el-button v-if="!$store.getters.banBtnList.includes('BTN_PROMOTER_COMMIISSION_REPORT_EXPORT')" round @click="downExcel">导 出</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 筛选 -->
          <!-- <div class="app-main-filter-collapse-box filter"> -->
            <!-- <el-collapse>
                <el-collapse-item title="按条件筛选" name="1" ref="filterCollapse">
                  <el-form-item label="类型：" prop="businessType">
                    <el-radio-group v-model="filterForm.businessType">
                      <el-radio label="all">全部</el-radio>
                      <el-radio label="消费">消费</el-radio>
                      <el-radio label="充值">充值</el-radio>
                      <el-radio label="赠送">赠送</el-radio>
                      <el-radio label="退款">退款</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-collapse-item>
            </el-collapse>-->
          <!-- </div> -->


        </el-form>
      </div>

      <!--内容展示区域-->
      <div class="content">
        <!-- 卡片 -->
        <!-- <div class="content-card">
          <el-row :gutter="10">
            <el-col :xs="8" :sm="8" :md="8" :xl="6">
              <el-card>

              </el-card>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :xl="6">
              <el-card>

              </el-card>
            </el-col>
            <el-col :xs="8" :sm="8" :md="8" :xl="6">
              <el-card>

              </el-card>
            </el-col>
          </el-row>
        </div>-->
        <!-- 表格内容 -->
        <div class="list-table">
          <el-table
            v-loading="tableLoading"
            size="small"
            :data="list"
            border
            stripe
            style="width: 100%"
            empty-text="暂无数据"
          >
            <el-table-column prop="consumeTime" label="消费时间" align="center" fixed="left" />
            <el-table-column prop="empName" label="员工名称" align="center" fixed="left" />
            <el-table-column prop="empCode" label="员工编号" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.empCode || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="memberName" label="消费会员" align="center" fixed="left" />
            <el-table-column prop="bonusType" label="消费类型" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.bonusType | filterBonusType }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="consumeContent" label="消费内容" align="center" fixed="left" />
            <el-table-column prop="payCost" label="会员实付金额（元）" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.payCost / 100 }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="bonusPercent" label="提成比例" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.bonusPercent / 10 }}%</span>
              </template>
            </el-table-column>
            <el-table-column prop="bonusMoney" label="提成金额（元）" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.bonusMoney|parseNumberToThousands }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grant_way" label="提成发放方式" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.grantWay | filterGrantWay }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grant_status" label="提成发放状态" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.grantStatus | filterGrantStatus }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="grantTime" label="提成发放时间" align="center" fixed="left">
              <template slot-scope="scope">
                <span>{{ scope.row.grantTime || '-' }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="提成备注" align="center" fixed="left" />
<!--
            <el-table-column prop="inviteTime" label="推广时间" fixed="left" width="150" />
            <el-table-column prop="empName" label="推广员" />
            <el-table-column prop="empCode" label="员工编号" />
            <el-table-column prop="memberName" label="会员名称" />
            <el-table-column prop="categoryName" label="卡类型" />
            <el-table-column prop="rechargeCost" label="首充金额(元)">
              <template slot-scope="scope">
                <span>{{ scope.row.rechargeCost|parseNumberToThousands }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="payCost" label="开卡金额(元)">
              <template slot-scope="scope">
                <span>{{ scope.row.payCost|parseNumberToThousands }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="rechargeTime" label="充值时间" />

            <el-table-column prop="remark" label="提成备注" /> -->
            <!-- <el-table-column remark="time" label="门店"></el-table-column> -->
            <!-- <el-table-column label="操作" width="150" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" round>详情</el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total!==0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPromotersBonusList } from '@/api/statement'
import { downPromotersBonusRecord } from '@/api/download'

const BONUSTYPECODE = {
  1: '开卡',
  2: '充值',
  3: '会员消费'
}
const GRANTSTATUSCODE = {
  1: '未发放',
  2: '已发放',
  3: '发放失败'
}
const GRANTWAYCODE = {
  1: '商户线下奖励',
  2: '线上分账'
}

export default {
  data() {
    return {
      // 配置
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      tableLoading: false, // 表格loading
      // 数据
      list: [], // 表格数据
      cardData_1: [],
      cardData_2: [],
      cardData_3: [],
      filterForm: {
        date: [
          this.$momentMini().format('YYYY-MM-DD'),
          this.$momentMini().format('YYYY-MM-DD')
        ],
        bonusType: '', // 1开卡2充值3会员消费
        grantStatus: '',  // 1未发放2已发放3发放失败
        grantWay: '', // 1商户线下奖励2线上分账
        businessType: 'all'
        // radio2: "all",
        // radio3: "all",
        // radio4: "all"
      },
      bonusTypeList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '开卡'
        },
        {
          value: 2,
          label: '充值'
        },
        {
          value: 3,
          label: '会员消费'
        }
      ],
      grantWayList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '商户线下奖励'
        },
        {
          value: 2,
          label: '线上分账'
        }
      ],
      grantStatusList: [
        {
          value: '',
          label: '全部'
        },
        {
          value: 1,
          label: '未发放'
        },
        {
          value: 2,
          label: '已发放'
        },
        {
          value: 3,
          label: '发放失败'
        }
      ]
    }
  },
  mounted() {
    this.initData()
  },
  filters: {
    filterBonusType(val) {
      return BONUSTYPECODE[val] || '-'
    },
    filterGrantStatus(val) {
      return GRANTSTATUSCODE[val] || '-'
    },
    filterGrantWay(val) {
      return GRANTWAYCODE[val] || '-'
    },
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取数据
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.$refs.filterForm.validate(valid => {
        if (valid) {
          this.filterForm.page = page
          this.filterForm.pageSize = pageSize
          const params = Object.assign({}, this.filterForm)
          params.startTime = params.date[0] + ' 00:00:00'
          params.endTime = params.date[1] + ' 23:59:59'
          // 判断是否打开筛选
          // if (!this.$refs.filterCollapse.isActive) {
          // delete params.businessType;
          // }
          delete params.date
          // 清除多余字段
          for (const key in params) {
            if (params[key] === '' || params[key] === 'all') {
              delete params[key]
            }
          }
          // 请求数据
          this.tableLoading = true
          getPromotersBonusList(params)
            .then(res => {
              this.tableLoading = false
              this.list = res.data.list
              this.paginationConfig.total = res.data.total
              this.paginationConfig.page = res.data.pageNum
            })
            .catch(err => {
              this.tableLoading = false
            })

          // this.cardData_1 = [
          //   "推广会员数",
          //   1111,
          //   "日均推广",
          //   11,
          //   "推广会员数：筛选条件内的提成记录条数",
          //   "日均推广：推广会员数/时间天数"
          // ];
          // this.cardData_2 = [
          //   "参与推广员工数",
          //   123,
          //   "",
          //   "",
          //   "参与推广员工数：筛选条件内的参与推广员工数"
          // ];
          // this.cardData_3 = [
          //   "提成总额",
          //   123123,
          //   "人均提成",
          //   11111,
          //   "提成总额：所选择的筛选条件下提成总额",
          //   "人均提成：提成总额/参与推广员工数"
          // ];
        }
      })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       *  按钮组
       */
    // 查询
    submitForm() {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 导出
    downExcel() {
      this.$refs.filterForm.validate(valid => {
        if (valid) {
          const params = Object.assign({}, this.filterForm)
          params.startTime = this.filterForm.date[0] + ' 00:00:00'
          params.endTime = this.filterForm.date[1] + ' 23:59:59'
          downPromotersBonusRecord(params)
            .then(res => {
              if (res.code === 0) {
                this.$alert(
                  '数据导出中，请稍后到数据下载中心进行下载',
                  '提示',
                  {
                    confirmButtonText: '确定',
                    center: true,
                    type: 'success',
                    callback: action => {}
                  }
                )
              }
            })
            .catch(err => {})
        }
      })
    },

    // 跳转推广配置
    goVipPromoters() {
      this.$router.push({
        name: 'VipPromoters',
        query: { type: 'config' }
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 头部说明 */
  .top-tips {
    margin-bottom: 20px;
  }
  .filter-btn {
    margin-bottom: 20px;
  }
  /* 内容 */
  .content {
    &-card {
      .el-col {
        margin-bottom: 20px;
      }
    }
  }
</style>
